<!DOCTYPE html>
<html>
<head>
	<title>Editor</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
	<nav id="nav">
		<div id="file"></div>
		<div id="edit"></div>
		<div id="tools"></div>
		<div id="help"></div>
	</nav>
	<div id="Slct"></div>
	<div id="area">
		
	</div>
	<script type="text/javascript" src="js/main.js"></script>
<script>
	var pos=[new Vector(),new Vector()],flag=false;
	area.onmousemove=function(event){
		if(flag==true){
			getPos(event);
			var swich;
			swich=(pos[0].y>=pos[1].y)?1:0;
				Slct.style.top=pos[swich].y+"px";
				Slct.style.height=(pos[1-swich].y-pos[swich].y)+"px";
			swich=(pos[0].x>=pos[1].x)?1:0;
				Slct.style.left=pos[swich].x+"px";
				Slct.style.width=(pos[1-swich].x-pos[swich].x)+"px";

		}
	};
	area.onmousedown=function(event){
		getPos(event);
		Slct.style.opacity=0.5;
		Slct.style.left=pos[0].x+"px";
		Slct.style.top=pos[0].y+"px";
		Slct.style.height=0;
		Slct.style.width=0;
		pos[1].x=pos[0].x;
		pos[1].y=pos[0].y;
		flag=true;
	};
	area.onmouseup=function(){
		Slct.style.opacity=0;
		// Slct.style.height=0;
		// Slct.style.width=0;
		flag=false;
	};
	function getPos(event){
		var event=event||window.event;
		if(event.offsetX||event.offsetY){
			pos[0].x=event.offsetX;
			pos[0].y=event.offsetY;
		}else if(event.layerX||event.layerY){
			pos[0].x=event.layerX-1;
			pos[0].y=event.layerY-1;
		}
	}
	function Vector(x=0,y=0){
		this.x=x;
		this.y=y;
	}
</script>
</body>
</html>